<template>
    <el-table :data="article" border style="width: 100%" :cell-style="{ height: '65px' }" v-loading="loading">
        <el-table-column label="封面" width="250">
            <template #default="scope">
                <img :src="scope.row.face" style="width: 100%;max-height: 200px;" />
            </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="time" label="上传时间" width="180" />
        <el-table-column prop="tag" label="标签" width="180" />
        <el-table-column prop="state" label="状态" width="180" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="preview(scope.row)" style="margin-right: 20px;">预览</el-button>
                <el-button type="warning" @click="updata(scope.row)" style="margin-right: 20px;">修改文章</el-button>
                <el-button type="danger" @click="deteleCheck(scope.row)" style="margin-right: 20px;">删除文章</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="previewVisible" title="预览" width="80%" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <div v-html="prop.content">
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="previewVisible = false">
                    收起
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible" title="删除文章" width="30%" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <div>
            确定要删除这篇文章吗，删除后不可恢复
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false, detele()">
                    确定
                </el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>

    <pageComponents2Class @pageChange="handlePageChange" @siezsChange="handleSizesChange" :max=length
        style="margin: 10px 0px;" />
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import pageComponents2Class from '@/components/global/pageComponents2Class.vue';
import router from '@/router';
export default {
    name: "adminUnCheck",
    components: {
        pageComponents2Class,
    },
    setup() {
        const store = useStore();
        let article = ref('');
        let previewVisible = ref(false);
        let dialogVisible = ref(false);

        let nowPage = ref(1);
        let nowSizes = ref(10);
        let length = ref('');

        let loading = ref(true);

        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/check/showMyUncheck/",
                headers: {
                    "satoken": store.state.admin.token,
                },
                data: {
                    author: store.state.admin.adminName,
                    page: 1,
                    sizes: 10,
                },
                success(resp) {
                    loading.value = false;
                    article.value = resp.article;
                    length.value = resp.length;
                }
            });
        }
        getInfo();
        let prop = ref();
        let preview = (t) => {
            prop.value = t;
            previewVisible.value = true;
        }
        let deteleCheck = () => {
            dialogVisible.value = true;
        }
        let detele = () => {
            dialogVisible.value = false;
        }
        let updata = (t) => {
            router.push({
                name: "articleUpload",
                query: {
                    id: t.id,
                    from: "uncheck",
                },
            })
        }
        let handlePageChange = (t) => {
            nowPage.value = t;
            getInfo();
        }
        let handleSizesChange = (sizes) => {
            nowSizes.value = sizes;
            getInfo();
        }

        return {
            preview,
            prop,
            previewVisible,
            dialogVisible,

            updata,
            detele,
            deteleCheck,
            handlePageChange,
            handleSizesChange,
            nowPage,
            length,
            nowSizes,

            loading,

            store,
            article,
        }
    }
}
</script>

<style scoped></style>